<template>
    <div class="root">
        <timers></timers>
        <transition name="btnss">
            <div class="btns"  v-if="show">
                <div class="login cont"><router-link to="/login">登录</router-link></div>
                <div class="register cont"><router-link to="/register">注册</router-link></div>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    mounted(){
        this.showBtn()
        window.sessionStorage.setItem('time',1)
    },
    data(){
        return {
            show:false
        }
    },
    methods:{
        showBtn(){
            console.log(this.$store.state.count)
            if(this.$store.state.count === 0){
                setTimeout(()=>{
                    this.show = true
                }, 3000)
            }
            this.$store.state.count++
            this.show = true
            // console.log(this.$store.state.count)
        }
    },
    sockets:{
        ids(value){
            window.sessionStorage.setItem('socketid',value)
        }
    }
}
</script>

<style lang="less" scoped>
    // Vue动画
    .btnss-enter,
    .btnss-leave-to{
        opacity: 0;
    }
    .btnss-enter-active,
    .btnss-leave-active{
        transition: 1s all ease-in;
    }
    .root{
        width: 100vw;
        height: 100vh;
        background-image: url('../assets/img/background.jpg');
        background-size: cover;
        background-position: center center;
        position: relative;
    }
    .btns{
        width: 100vw;
        height: 60px;
        // background-color: skyblue;
        position: absolute;
        bottom: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        .cont{
            width: 80.5px;
            height: 50px;
            background-color: rgb(12, 203, 25);
            margin: 0 60px;
            border-radius: 5px;
            a{
                text-decoration: none;
                color: white;
                display: block;
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 50px;
            }
        }
    }
</style>
